<template>
  <div class="list-container">
    <div class="nav-space">
      <van-nav-bar fixed
                   title="统计分析">
      </van-nav-bar>
    </div>
    <div class="map">
      <div id="main"
           ref="myCharts"
           class="analyze-card">
      </div>
    </div>
    <index-footer />
  </div>
</template>

<script>

import { onMounted, ref } from 'vue'
import IndexFooter from '@/pages/Index/IndexFooter.vue'
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
export default {
  components: { IndexFooter },
  setup () {
    const myCharts = ref()
    const echartInit = () => {
      var myChart = echarts.init(myCharts.value);
      // 指定图表的配置项和数据
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      option && myChart.setOption(option);
      window.onresize = function () {
        //自适应大小, 不用的话不会自适应大小。
        myChart.resize();
      }
    }
    onMounted(() => {
      echartInit()
    })
    return {
      echartInit,
      myCharts
    }
  }
}
</script>

<style scoped>
.list-container {
  background: #f7f7f7;
}
.analyze-card {
  /* width: 100vw; */
  height: 233px;
  margin: 15px;
}
</style>